<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<meta name="viewport" content="width=device-width" />

<script src="jquery.js"></script>

<style>
    *{
        margin:0;
        padding:0;
    }
    .fl{
        float:left;
    }
    .fr{
        float:right;
    }
    .clearfix:after{
        display:table;
        content:"";
        clear:both;
    }

    html{
        font-size:100px;
    }
    body{
        background:#f7f7f7;
    }

    .nav{
        height:.45rem;
        width:100%;
        line-height:.45rem;
        text-align:center;
        box-sizing:border-box;
        border-bottom:1px solid #ccc;
        z-index:9999999;
        color:#333;
        font-size:.16rem;
    }
    .nav .back_btn{
        height:.45rem;
        width:.45rem;
        line-height:.45rem;
        background:url(back_light.png) no-repeat center center;
        background-size:.22rem;
        cursor:pointer;
        position:absolute;
        left:0;
        top:0;
    }
    .user{
        font-size:.14rem;
        position:relative;
        padding:.15rem;
        margin-top:.15rem;
    }
    .user_tel{
        height:.45rem;
        line-height:.45rem;
        background:#fff;
        width:100%;
        position:relative;
        box-sizing:border-box;
        margin-bottom:0.2rem;
    }
    .user_tel .code{
        display:inline-block;
        width:.45rem;
        padding-right:0.15rem;
        text-align:right;
        background:url(bottom_arrow.png) no-repeat right center;
        background-size:0.1rem;
    }
    .user_tel input{
        border:none;
        outline:none;
        padding-left:5px;
    }
    .clear_user_tel{
        display:inline-block;
        height:0.2rem;
        width:0.2rem;
        cursor:pointer;
        background:url(close.png) no-repeat;
        background-size:0.2rem;
        margin-right:0.15rem;
        margin-top:0.12rem;
        opacity:0.6;
        display:none;
    }
    .question{
        margin-bottom:0.2rem;
        height:0.22rem;
        line-height:0.22rem;
        font-size:0.12rem;
        color:#999;
        padding-left:0.05rem;
    }
    .question input{
        vertical-align:middle;
        padding-bottom:0.02rem;
        outline:none;
        border:none;
    }
    .question span{
        color:#1b8efb;
    }
    .next_btn{
        width:100%;
        border:1px solid #1b8efb;
        outline:none;
        height:0.45rem;
        line-height:0.45rem;
        background:#fff;
        color:#666;
        text-align:center;
    }

    #countryList{
        background:#fff;
    }
    .country{
        font-size:14px;
        display:flex;
        justify-content:space-between;
        height:0.4rem;
        line-height:0.4rem;
        margin:0 0.15rem;
        padding:0 0.05rem;
        box-sizing:border-box;
        border-bottom:1px solid #f5f5f5;
    }
    .countryNum{
        font-size:12px;
        color:#666;
    }
    .zimu{
        font-size:14px;
        background:#f5f5f5;
        padding:0 0.2rem;
        height:0.45rem;
        line-height:0.45rem;
    }
</style>

<div class="nav">
    <span class="back_btn"></span>
    <span class="nav_title" id="nav_title">京东注册</span>
</div>

<div class="user" id="user">
    <div class="user_tel">
        <span class="code" id="code">+86</span>
        <input placeholder="请输入手机号" id="user_tel_input" />
        <span class="clear_user_tel fr" id="clear_btn"></span>
    </div>

    <div class="question">
        <input type="image" src="choose.png" id="choose" width="16" />
        我已同意<span>金鱼海淘用户隐私协议</span>
    </div>

    <div class="next_btn">下一步</div>
</div>

<div id="countryList">

</div>

<script>
    function chooseBtnImg(){
        var isChoose=false;
        var choose=document.getElementById("choose");
        choose.onclick=function(){
            if(!isChoose){
                choose.src="choose_fill.png";
                isChoose=true;
            }else{
                choose.src="choose.png";
                isChoose=false;
            }
        };
    }
    chooseBtnImg();

    var clear_btn=document.getElementById("clear_btn");
    var user_tel_input=document.getElementById("user_tel_input");

    user_tel_input.onfocus=function(){

        clear_btn.style.display="block";

    }

    clear_btn.onclick=function(){

        user_tel_input.value="";
        this.style.display="none";

    }


    var data = {"*":[{"中国":"86"},{"中国香港":"852"},{"中国澳门":"853"},{"中国台湾":"886"},{"新加坡":"65"},{"马来西亚":"60"},{"澳大利亚":"61"},{"加拿大":"1"},{"美国":"1"},{"新西兰":"64"},{"日本":"81"},{"韩国":"82"}],"A":[{"阿尔巴尼亚":"355"},{"阿尔及利亚":"213"},{"阿富汗":"93"},{"阿根廷":"54"},{"爱尔兰":"353"},{"埃及":"20"},{"爱沙尼亚":"372"},{"埃塞俄比亚":"251"},{"阿联酋":"971"},{"阿鲁巴":"297"},{"阿曼":"968"},{"安道尔":"376"},{"安哥拉":"244"},{"安圭拉":"1264"},{"安提瓜和巴布达":"1268"},{"澳大利亚":"61"},{"奥地利":"43"},{"阿塞拜疆":"994"}],"B":[{"巴巴多斯":"1268"},{"巴布亚新几内亚":"675"},{"巴哈马":"1242"},{"白俄罗斯":"375"},{"百慕大三角":"1441"},{"巴基斯坦":"92"},{"巴拉圭":"595"},{"巴林":"973"},{"巴拿马":"507"},{"保加利亚":"359"},{"巴西":"55"},{"贝宁":"229"},{"比利时":"32"},{"冰岛":"354"},{"博茨瓦纳":"267"},{"波多黎各":"1787"},{"波兰":"48"},{"玻利维亚":"591"},{"伯利兹":"501"},{"波斯尼亚和黑塞哥维那":"387"},{"不丹":"975"},{"布基纳法索":"226"},{"布隆迪":"257"}],"C":[{"赤道几内亚":"240"}],"D":[{"丹麦":"45"},{"德国":"49"},{"东帝汶":"670"},{"多哥":"228"},{"多米尼加共和国":"1767"}],"E":[{"厄立特里亚":"291"},{"俄罗斯":"7"}],"F":[{"法国":"33"},{"法罗群岛":"298"},{"法属圭亚那":"594"},{"斐济群岛":"679"},{"芬兰":"358"},{"佛得角":"238"}],"G":[{"冈比亚":"220"},{"格陵兰":"299"},{"格林纳达":"1473"},{"格鲁吉亚":"995"},{"哥伦比亚":"57"},{"哥斯达黎加":"506"},{"瓜德罗普":"590"},{"关岛":"1671"},{"古巴":"53"},{"圭亚那":"592"}],"H":[{"韩国":"82"},{"海地":"509"},{"哈萨克斯坦":"7"},{"黑山":"382"},{"荷兰":"31"},{"洪都拉斯":"504"}],"J":[{"加纳":"233"},{"加拿大":"1"},{"柬埔寨":"855"},{"加蓬":"241"},{"吉布提":"253"},{"捷克":"420"},{"吉尔吉斯斯坦":"996"},{"津巴布韦":"263"},{"几内亚":"224"},{"几内亚比绍":"245"}],"K":[{"开曼群岛":"1345"},{"喀麦隆":"237"},{"卡塔尔":"974"},{"克罗地亚":"385"},{"科摩罗":"269"},{"肯尼亚":"254"},{"科特迪瓦":"225"},{"科威特":"965"},{"库克群岛":"682"}],"L":[{"莱索托":"266"},{"老挝":"856"},{"拉脱维亚":"371"},{"黎巴嫩":"961"},{"利比里亚":"231"},{"利比亚":"218"},{"列支敦士登":"4175"},{"立陶宛":"370"},{"罗马尼亚":"40"},{"卢森堡":"352"},{"卢旺达":"250"}],"M":[{"马达加斯加":"261"},{"马尔代夫":"960"},{"马耳他":"356"},{"马来西亚":"60"},{"马拉维":"265"},{"马里":"223"},{"毛里求斯":"230"},{"毛里塔尼亚":"222"},{"马其顿":"389"},{"马提尼克":"596"},{"美国":"1"},{"美属萨摩亚":"684"},{"美属维尔京群岛":"1340"},{"蒙古":"976"},{"孟加拉":"880"},{"蒙特塞拉特":"1664"},{"密克罗尼西亚":"691"},{"秘鲁":"51"},{"摩尔多瓦":"373"},{"摩洛哥":"212"},{"摩纳哥":"377"},{"莫桑比克":"258"},{"墨西哥":"52"}],"N":[{"纳米比亚":"0264"},{"南非":"27"},{"厄瓜多尔":"593"},{"南苏丹":"211"},{"尼泊尔":"977"},{"尼加拉瓜":"505"},{"尼日尔":"227"},{"尼日利亚":"234"},{"挪威":"47"}],"P":[{"帕劳":"680"},{"葡萄牙":"351"}],"R":[{"日本":"81"},{"瑞典":"46"},{"瑞士":"41"}],"S":[{"萨尔瓦多":"503"},{"塞尔维亚":"381"},{"塞拉利昂":"232"},{"塞内加尔":"221"},{"塞浦路斯":"357"},{"塞舌尔":"248"},{"萨摩亚":"685"},{"沙特阿拉伯":"966"},{"圣多美和普林西比":"239"},{"圣基茨和尼维斯":"1869"},{"圣卢西亚":"1758"},{"圣马力诺":"378"},{"圣文森特和格林纳丁斯":"1784"},{"斯里兰卡":"94"},{"斯洛伐克":"421"},{"斯洛文尼亚":"386"},{"斯威士兰":"0268"},{"苏丹":"249"},{"苏里南":"597"},{"所罗门群岛":"677"},{"索马里":"252"}],"T":[{"泰国":"66"},{"汤加":"676"},{"坦桑尼亚":"255"},{"塔吉克斯坦":"992"},{"特克斯和凯科斯群岛":"1649"},{"特立尼达和多巴哥":"1868"},{"土耳其":"90"},{"突尼斯":"216"},{"图瓦卢":"688"}],"W":[{"瓦努阿图":"678"},{"危地马拉":"502"},{"委内瑞拉":"58"},{"文莱":"673"},{"乌干达":"256"},{"乌克兰":"380"},{"乌拉圭":"598"},{"乌兹别克斯坦":"998"}],"X":[{"西班牙":"34"},{"希腊":"30"},{"新加坡":"65"},{"新喀里多尼亚":"687"},{"新西兰":"64"},{"匈牙利":"36"},{"叙利亚":"963"}],"Y":[{"牙买加":"1876"},{"亚美尼亚":"374"},{"也门":"967"},{"意大利":"39"},{"伊拉克":"964"},{"伊朗":"98"},{"印度":"91"},{"印度尼西亚":"62"},{"英国":"44"},{"英属维尔京群岛":"1284"},{"以色列":"972"},{"约旦":"962"},{"越南":"84"}],"Z":[{"赞比亚":"260"},{"乍得":"235"},{"智利":"56"},{"中非":"236"},{"中国":"86"},{"中国澳门":"853"},{"中国台湾":"886"},{"中国香港":"852"}]};

    window.onload=function(){
        var code1=document.getElementById("code");
        code1.onclick=function(){
            var user=document.getElementById("user");
            user.style.display="none";

            var countryList=document.getElementById("countryList");
            countryList.style.display="block";

            var nav_title=document.getElementById("nav_title");
            nav_title.innerHTML="选择国家和地区";


            for(var i=1;i<=26;i++){
                var s=String.fromCharCode(i+64);

                if(data[s]){

                    var zimuDiv=document.createElement("div");
                    zimuDiv.className="zimu";
                    zimuDiv.innerHTML=s;
                    countryList.appendChild(zimuDiv);

                    for(var j=0;j<data[s].length;j++){
                        var p=data[s][j];

                        for(var x in p){
                            var countryDiv=document.createElement("div");
                            countryDiv.className="country";

                            countryDiv.onclick=function(){
                                code1.innerHTML=countryDiv.getElementsByTagName("div")[1].innerHTML;
                                countryList.style.display="none";
                                user.style.display="block";
                            };

                            var countryName=document.createElement("div");
                            countryName.innerHTML=x;
                            var countryNum=document.createElement("div");
                            countryNum.innerHTML="+" + p[x];

                            countryDiv.appendChild(countryName);
                            countryDiv.appendChild(countryNum);

                            countryList.appendChild(countryDiv);
                        }
                    }
                }
            }
        }
    }













</script>


</body>
</html>